<template>
  <div class="hamburger-container">
    <menu-unfold-outlined
      v-if="collapsed"
      class="trigger"
      @click="handleClick"
    />
    <menu-fold-outlined v-else class="trigger" @click="handleClick" />
  </div>
</template>
<script setup>
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons-vue";

const { collapsed } = defineProps({
  collapsed: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["toggleCollapse"]);
const handleClick = () => {
  emit("toggleCollapse");
};
</script>
<style scoped lang="less">
.hamburger-container {
  line-height: 50px;
  float: left;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
  &:hover {
    background: rgba(0, 0, 0, 0.05);
  }
}
</style>
